<template>
  <div :class="['nav-bar', { 'nav-bar--fixed': fixed }]" :style="style">
    <!-- 状态栏占位 -->
    <div v-if="fixed" class="nav-bar__status-bar" :style="{ height: statusBarHeight + 'px' }" />
    
    <div class="nav-bar__content">
      <!-- 返回按钮 -->
      <div v-if="showBack" class="nav-bar__left" @click="handleBack">
        <Left size="20px" />
        <span v-if="backText" class="nav-bar__back-text">{{ backText }}</span>
      </div>
      <div v-else-if="$slots.left" class="nav-bar__left">
        <slot name="left" />
      </div>
      
      <!-- 标题 -->
      <div class="nav-bar__title">
        <template v-if="$slots.title">
          <slot name="title" />
        </template>
        <template v-else>
          {{ title }}
        </template>
      </div>
      
      <!-- 右侧按钮 -->
      <div v-if="$slots.right" class="nav-bar__right">
        <slot name="right" />
      </div>
      <div v-else class="nav-bar__right" />
    </div>
  </div>
  
  <!-- 占位元素 -->
  <div v-if="fixed" :style="{ height: navBarHeight + 'px' }" />
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import Taro from '@tarojs/taro';
import { Left } from '@nutui/icons-vue-taro';

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true
  },
  // 返回按钮文字
  backText: {
    type: String,
    default: ''
  },
  // 是否固定在顶部
  fixed: {
    type: Boolean,
    default: true
  },
  // 背景色
  background: {
    type: String,
    default: ''
  },
  // 文字颜色
  color: {
    type: String,
    default: ''
  },
  // 层级
  zIndex: {
    type: Number,
    default: 100
  }
});

const emit = defineEmits(['back']);

// 获取状态栏高度
const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight || 20;
// 导航栏高度
const contentHeight = 44;
// 总高度
const navBarHeight = computed(() => statusBarHeight + contentHeight);

// 样式
const style = computed(() => ({
  backgroundColor: props.background || 'var(--background-color-extra-light)',
  color: props.color || 'var(--text-color-primary)',
  zIndex: props.zIndex
}));

// 返回上一页
const handleBack = () => {
  emit('back');
  if (Taro.getCurrentPages().length > 1) {
    Taro.navigateBack();
  }
};
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.nav-bar {
  width: 100%;
  background-color: var(--background-color-extra-light);
  
  &--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  
  &__content {
    @include flex(row, space-between, center);
    position: relative;
    height: 44px;
    padding: 0 $spacing-base;
  }
  
  &__left {
    @include flex(row, flex-start, center);
    min-width: 60px;
    height: 100%;
    cursor: pointer;
  }
  
  &__back-text {
    margin-left: 4px;
    font-size: $font-size-base;
  }
  
  &__title {
    @include flex(row, center, center);
    position: absolute;
    left: 100px;
    right: 100px;
    height: 100%;
    font-size: $font-size-medium;
    font-weight: 500;
    @include text-ellipsis;
  }
  
  &__right {
    @include flex(row, flex-end, center);
    min-width: 60px;
    height: 100%;
  }
}
</style>

<script lang="ts">
export default {
  name: 'NavBar'
};
</script>